<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="220px" class="aside">
      <div class="logo">

        <span>花店管理平台</span>
      </div>
      <el-menu 
        default-active="1" 
        class="el-menu-vertical-demo"
        @select="handleMenuSelect"
        background-color="#fdf2e9"
        text-color="#8b5a2b"
        active-text-color="#ffffff"
      >
        <el-menu-item index="1">
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="2">
          <span>商品管理</span>
        </el-menu-item>
        <el-menu-item index="3">
          <span>订单管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
 
    <!-- 右侧主内容 -->
    <el-container>
      <!-- 顶部导航 -->
      <el-header class="header">
        <div class="user-info">
          <el-avatar icon="User" class="avatar" />
          <span>管理员</span>
        </div>
      </el-header>
      
      <!-- 内容区域（路由视图） -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>

import { useRouter } from 'vue-router'

const router = useRouter() // 正确引入路由实例

const handleMenuSelect = (index) => {
  switch(index) {
    case '1': router.push('/user'); break;    // 注意：这里仍然使用绝对路径
    case '2': router.push('/product'); break; // Vue Router 会正确解析
    case '3': router.push('/order'); break;
  }
}
</script>

<style scoped>
/* 基础布局与间距 */
.layout-container {
  height: 100vh;
  font-family: "Microsoft YaHei", sans-serif;
}

/* 左侧菜单-花店主题风格 */
.aside {
  background-color: #fdf2e9; /* 米粉色背景 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  color: #8b5a2b; /* 深棕色文字 */
  background-color: #f8a898; /* 珊瑚粉标题栏 */
}
.logo-icon {
  font-size: 24px !important;
  margin-right: 8px;
  color: #ffffff;
}

.el-menu-vertical-demo {
  border-right: none;
}

/* 菜单文字样式 */
.el-menu-item span {
  font-size: 16px;
}
.el-menu-item {
  padding: 15px 0 !important; /* 调整菜单项间距 */
  transition: all 0.3s ease;
}
.el-menu-item:hover {
  background-color: #f8a89880 !important; 
  color: #ffffff !important;
}
.el-menu-item.is-active {
  background-color: #f8a898 !important;
  color: #ffffff !important;
}

/* 顶部导航 */
.header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid #eee;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.avatar {
  background-color: #f8a898;
  margin-right: 8px;
}
.user-info {
  display: flex;
  align-items: center;
  margin-right: 20px;
  color: #8b5a2b;
}

/* 主内容区域 */
.main-content {
  padding: 20px;
  background-color: #ffffff;
}
</style>